<template>
  <div 
    class="poetry-card group"
    @click="$emit('click')"
  >
    <!-- 学习状态徽章 -->
    <div class="absolute top-4 right-4 z-10">
      <div v-if="isMastered" class="w-6 h-6 bg-accent-green rounded-circle flex items-center justify-center">
        <span class="text-white text-xs font-bold">✓</span>
      </div>
      <div v-else-if="isLearned" class="w-6 h-6 bg-primary-coral rounded-circle flex items-center justify-center">
        <span class="text-white text-xs font-bold">学</span>
      </div>
      <div v-else class="w-6 h-6 bg-gray-200 rounded-circle"></div>
    </div>
    
    <!-- 主题图标 -->
    <div class="absolute top-4 left-4 z-10">
      <div class="w-8 h-8 rounded-circle overflow-hidden">
        <img 
          :src="getThemeIcon(poem)" 
          :alt="poem.title"
          class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-300"
        />
      </div>
    </div>
    
    <div class="p-8">
      <!-- 古诗标题 -->
      <h3 class="text-xl font-bold text-text-primary mb-3 group-hover:text-primary-coral transition-colors">
        {{ poem.title }}
      </h3>
      
      <!-- 作者和朝代 -->
      <div class="flex items-center justify-between mb-4">
        <div class="flex items-center space-x-2">
          <img 
            :src="`/images/poet_${getAuthorImageName(poem.author)}_0.jpg`" 
            :alt="poem.author"
            class="w-6 h-6 rounded-circle"
            @error="handleImageError"
          />
          <span class="text-sm font-semibold text-text-secondary">{{ poem.author }}</span>
        </div>
        <span class="text-xs bg-primary-coral text-white px-2 py-1 rounded-full">
          {{ poem.dynasty }}
        </span>
      </div>
      
      <!-- 古诗前两句 -->
      <div class="text-base text-text-primary mb-6 leading-relaxed">
        {{ getFirstTwoLines(poem.original_text) }}
      </div>
      
      <!-- 收藏按钮 -->
      <div class="flex items-center justify-between">
        <div class="flex items-center space-x-2">
          <button 
            @click.stop="toggleFavorite"
            class="w-8 h-8 rounded-circle flex items-center justify-center transition-all duration-200"
            :class="isFavorited 
              ? 'bg-accent-yellow text-white' 
              : 'bg-gray-100 text-gray-400 hover:bg-accent-yellow hover:text-white'"
          >
            <span class="text-sm">★</span>
          </button>
          <span class="text-xs text-text-tertiary">
            {{ isFavorited ? '已收藏' : '收藏' }}
          </span>
        </div>
        
        <div class="flex items-center text-xs text-text-tertiary">
          <span>{{ getWordCount(poem.original_text) }}字</span>
          <span class="mx-1">·</span>
          <span>{{ getDifficultyLevel(poem.original_text) }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useProgressStore } from '@/stores/progress'
import type { Poetry } from '@/types'

interface Props {
  poem: Poetry
}

const props = defineProps<Props>()

defineEmits<{
  click: []
}>()

const progressStore = useProgressStore()

// 计算学习状态
const isLearned = computed(() => 
  progressStore.progress.learned_poems.includes(props.poem.id)
)
const isMastered = computed(() => 
  progressStore.progress.mastered_poems.includes(props.poem.id)
)
const isFavorited = computed(() => 
  progressStore.progress.favorites.includes(props.poem.id)
)

// 切换收藏状态
const toggleFavorite = () => {
  progressStore.toggleFavorite(props.poem.id)
}

// 获取主题图标
const getThemeIcon = (poem: Poetry): string => {
  const themeMap: Record<string, string> = {
    '咏鹅': '/images/icon_goose_3.jpg',
    '静夜思': '/images/icon_moon_3.jpg',
    '春晓': '/images/theme_spring_2.jpg',
    '咏柳': '/images/theme_spring_2.jpg',
    '小池': '/images/theme_summer_5.png',
    '山行': '/images/theme_autumn_4.jpg',
    '游子吟': '/images/theme_family_5.jpg',
  }
  
  return themeMap[poem.title] || '/images/icon_book_3.jpg'
}

// 获取作者头像
const getAuthorImageName = (author: string): string => {
  const nameMap: Record<string, string> = {
    '李白': 'libai',
    '杜甫': 'dufu',
    '骆宾王': 'luobinwang',
    '孟浩然': 'default',
    '贺知章': 'default',
    '李绅': 'default',
    '杨万里': 'default',
    '白居易': 'default',
    '杜牧': 'default',
    '王之涣': 'default',
    '王维': 'default',
    '王昌龄': 'default',
    '贾岛': 'default',
    '张继': 'default',
    '孟郊': 'default',
    '王安石': 'default',
    '苏轼': 'default',
    '柳宗元': 'default',
    '文嘉': 'default'
  }
  
  return nameMap[author] || 'default'
}

// 图片加载错误处理
const handleImageError = (event: Event) => {
  const img = event.target as HTMLImageElement
  img.src = '/images/icon_book_3.jpg'
}

// 获取前两句
const getFirstTwoLines = (text: string): string => {
  const lines = text.split(/[，。！？]/).filter(line => line.trim())
  return lines.slice(0, 2).join('，') + '。'
}

// 获取字数
const getWordCount = (text: string): number => {
  return text.length
}

// 获取难度级别
const getDifficultyLevel = (text: string): string => {
  const wordCount = getWordCount(text)
  if (wordCount <= 20) return '启蒙'
  if (wordCount <= 28) return '进阶'
  return '熟练'
}
</script>

<style scoped>
.poetry-card {
  position: relative;
  background: white;
  border-radius: 32px;
  box-shadow: 0 8px 20px rgba(45, 55, 72, 0.12);
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  cursor: pointer;
  overflow: hidden;
}

.poetry-card:hover {
  transform: translateY(-16px) rotate(-2deg);
  box-shadow: 0 16px 32px rgba(255, 107, 107, 0.25);
  border: 4px solid transparent;
  background: linear-gradient(white, white) padding-box,
              linear-gradient(135deg, #FF6B6B, #FF8E53) border-box;
}

.poetry-card:hover .group-hover\:scale-110 {
  transform: scale(1.1);
}
</style>